<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="分红池名称">
                <a-input v-model="queryParam.name" placeholder="请输入分红池名称" allow-clear></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="searchData">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :border="false">
      <div class="table-operator flex-y-center flex-x-sb">
        <a-radio-group v-model="queryParam.status" @change="callback">
          <a-radio-button :value="''"> 全部 </a-radio-button>
          <a-radio-button :value="1"> 启用 </a-radio-button>
          <a-radio-button :value="0"> 禁用 </a-radio-button>
        </a-radio-group>
        <div>
          <a-button type="primary" @click="onAdd" icon="plus">添加</a-button>
        </div>
      </div>
      <a-table
        style="width: 100%; overflow-x: auto"
        v-if="columns.length"
        ref="tableList"
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :row-key="(record) => record.id"
        :pagination="{
          total: this.totalCount,
          current: this.pageNo,
          showSizeChanger: true,
          onChange: this.tablePageChange,
          onShowSizeChange: this.paginationSizeChange,
        }"
      >
        <template slot="ico" slot-scope="text, record">
          <img v-if="record.ico" :src="record.ico" alt="" style="width: 40px; height: 40px" />
          <span v-else>-</span>
        </template>
        <template slot="condition_type" slot-scope="text, record">
          {{ record.condition_type == 1 ? '全部达成' : record.condition_type == 2 ? '部分达成' : '-' }}
        </template>
        <template slot="condition" slot-scope="text, record">
          <div class="condition" v-if="record.condition.self_buy_goods.is_open">
            第 {{ record.condition.self_buy_goods.start }} ~
            {{ record.condition.self_buy_goods.end }} 名，购买了指定商品之一
            <a-button type="link" @click="lookProduct('self_buy_goods', record)">查看</a-button>
          </div>
          <div class="condition" v-if="record.condition.spread_buy_goods.is_open">
            累计直推 {{ record.condition.spread_buy_goods.spread_num }} 人，购买了指定商品之一
            <a-button type="link" @click="lookProduct('spread_buy_goods', record)">查看</a-button>
          </div>
          <div class="condition" v-if="record.condition.cycle_buy_goods.is_open">
            周期新增直推 {{ record.condition.cycle_buy_goods.spread_num }} 人，购买了指定商品之一
            <a-button type="link" @click="lookProduct('cycle_buy_goods', record)">查看</a-button>
          </div>
          <div class="condition" v-if="record.condition.specify_user.is_open">
            指定会员 <a-button type="link" @click="lookUser('specify_user', record)">查看</a-button>
          </div>
          <div class="condition" v-if="record.condition.see_ad_num.is_open">
            <span v-if="!record.condition.see_ad_num.is_open">定时发放</span>
            <div v-else>任务发放， 看 {{ record.condition.see_ad_num.num }} 条广告</div>
          </div>
        </template>
        <template slot="pool_now" slot-scope="text, record">
          {{ record.pool_now ? record.pool_now.pool_now : '-' }}
        </template>
        <template slot="rate" slot-scope="text, record">
          {{ record.rate ? record.rate + '%' : '-' }}
        </template>
        <template slot="cycle_type" slot-scope="text, record">
          {{ record.cycle_type == 1 ? '月' : record.cycle_type == 2 ? '周' : record.cycle_type == 3 ? '天' : '-' }}
        </template>
        <template slot="is_display" slot-scope="text, record">
          {{ record.is_display == 1 ? '是' : record.is_display == 0 ? '否' : '-' }}
        </template>
        <template slot="status" slot-scope="text, record">
          {{ record.status == 1 ? '启用' : record.status == 0 ? '关闭' : '-' }}
        </template>
        <template slot="action" slot-scope="text, record">
          <a-button type="link" @click="lookDetail(record)" size="small">明细</a-button>
          <a-button type="link" @click="lookCycle(record)" size="small">周期明细</a-button>
          <a-button type="link" @click="handleEdit(record)" size="small">编辑</a-button>
          <a-popconfirm title="确认删除吗？" @confirm="handleDelete(record)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>

    <addForm ref="addForm" @getList="getList" />
    <editForm ref="editForm" @getList="getList" />
    <productList ref="productList" />
    <userList ref="userList" />
    <logList ref="logList" />
    <cycleList ref="cycleList" />
  </page-header-wrapper>
</template>

<script>
import { poolList, delPoolItem } from '@/api/plat'
import addForm from './modules/addForm'
import editForm from './modules/editForm'
import productList from './modules/productlist'
import userList from './modules/userlist'
import logList from './modules/loglist'
import cycleList from './modules/cycleList'

export default {
  name: 'pool-list-page',
  components: {
    addForm,
    editForm,
    productList,
    userList,
    logList,
    cycleList,
  },
  data() {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 50,
        },
        {
          title: '分红池名称',
          dataIndex: 'name',
          width: 120,
        },
        {
          title: '图标',
          dataIndex: 'ico',
          scopedSlots: { customRender: 'ico' },
          width: 80,
        },
        {
          title: '当前期数',
          dataIndex: 'cycle_no_now',
          width: 120,
        },
        {
          title: '本期分红',
          dataIndex: 'pool_now',
          scopedSlots: { customRender: 'pool_now' },
          width: 100,
        },
        {
          title: '累计分红',
          dataIndex: 'total_price',
          width: 100,
        },
        {
          title: '达成条件类型',
          dataIndex: 'condition_type',
          scopedSlots: { customRender: 'condition_type' },
          width: 120,
        },
        {
          title: '达成条件',
          dataIndex: 'condition',
          scopedSlots: { customRender: 'condition' },
          // width: 350,
        },
        {
          title: '比例',
          dataIndex: 'rate',
          scopedSlots: { customRender: 'rate' },
          width: 80,
        },
        {
          title: '分红周期',
          dataIndex: 'cycle_type',
          scopedSlots: { customRender: 'cycle_type' },
          width: 100,
        },
        {
          title: '显示',
          dataIndex: 'is_display',
          scopedSlots: { customRender: 'is_display' },
          width: 80,
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          width: 100,
        },
        {
          title: '操作',
          dataIndex: 'action',
          // fixed:'right',
          scopedSlots: { customRender: 'action' },
          width: 150,
        },
      ],
      queryParam: {
        name: null,
        status: '',
      },
      loading: false,
      dataSource: [],
      totalCount: 0,
      pageNo: 1,
      pageSize: 10,
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      var newObj = {}
      newObj = { ...this.queryParam, pageNo: this.pageNo, pageSize: this.pageSize }
      this.loading = true
      const res = await poolList(newObj)
      this.loading = false
      if (!res.code) {
        this.dataSource = res.data.data
        this.totalCount = res.data.totalCount
      }
    },
    searchData() {
      this.pageNo = 1
      this.getList()
    },
    tablePageChange(e) {
      this.pageNo = e
      this.getList()
    },
    paginationSizeChange(current, size) {
      this.pageNo = current
      this.pageSize = size
      this.getList()
    },
    callback(e) {
      this.queryParam.status = e.target.value
      this.getList()
    },
    lookProduct(name, record) {
      this.$nextTick(() => {
        this.$refs.productList.handleShow(name, record.condition[name].goods_ids, false)
      })
    },
    lookUser(name, record) {
      this.$nextTick(() => {
        this.$refs.userList.handleShow(name, record.condition[name].user_ids, false)
      })
    },
    // 明细
    lookDetail(record) {
      this.$nextTick(() => {
        this.$refs.logList.handleShow(record)
      })
    },
    lookCycle(record) {
      this.$nextTick(() => {
        this.$refs.cycleList.handleShow(record)
      })
    },
    // 添加
    onAdd() {
      this.$nextTick(() => {
        this.$refs.addForm.handleShow()
      })
    },
    // 编辑
    handleEdit(record) {
      this.$nextTick(() => {
        this.$refs.editForm.handleShow(record)
      })
    },
    // 删除
    handleDelete(record) {
      const hide = this.$message.loading('删除中...', 0)
      delPoolItem(record.id)
        .then((res) => {
          hide()
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.getList()
          } else {
            this.$error({ content: res.msg })
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
.condition {
  min-width: 330px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
</style>
